import React,{Component} from 'react';
import './login.less'
import {Link} from 'react-router-dom'
import { Form, Input, Button, Checkbox ,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {loginApi} from '../../api/index.js'
import {login_info} from '../../store/action-type'
import {connect} from 'react-redux'

class Login extends Component {
     onFinish= async (val)=>{
      console.log(val)
      const parmas={
        user_name:val.username,
        user_pwd:val.password
      }
     await loginApi(parmas).then(res=>{
       console.log(res)
          if(res.status==1){
            message.success(res.info?res.info:"登陆成功！")
            this.props.login_info(res.data.sid)
            this.props.history.push('/home')
            return
          }
          message.error(res.info?res.info:"登陆失败i")
      }).catch(res=>{

      })
    }
    render(){
        return(
            <div className="login-view">
            <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your Username!',
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your Password!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
      
              <a className="login-form-forgot" href="">
                Forgot password
              </a>
            </Form.Item>
      
            <Form.Item>
               <Button type="primary" htmlType="submit" className="login-form-button">
                 登陆
              </Button>
            </Form.Item>
            <Link to="/register">注册</Link>
          </Form>
          </div>
        )
    }
}



const loginInfo=(dispatch,data)=>{
  return {
    login_info:()=>dispatch(login_info(data))
  }
}


export default connect(state=>state,{login_info})(Login);